<template>
	<FormPlus label-width="100px" ref="roleForm" :form-rules="formRules" :form-columns="formColumns">
		<template #Actions>
			<el-button type="primary" @click="onSubmit(roleForm)">确定</el-button>
		</template>
	</FormPlus>
</template>

<script setup lang="ts">
import FormPlus from '@/components/FormPlus/index.vue'
import { reactive, ref } from 'vue'
import { api } from '@/api/index'
import { ElMessage, FormInstance } from 'element-plus'
const { RequestRoleAdd } = api
const emit = defineEmits(['close'])
const roleForm = ref(null)
const formColumns = reactive([
	{
		xType: 'Input',
		label: '角色名',
		prop: 'name',
		span: 16
	},
	{
		xType: 'Input',
		label: '描述',
		prop: 'description',
		span: 16,
		type: 'textarea'
	},
	{
		slotName: 'Actions',
		span: 16,
		offset: 4
	}
])
const formRules = ref({
	name: [{ required: true, message: '请输入菜单名', trigger: 'blur' }]
})

async function onSubmit(formEl: FormInstance | undefined) {
	if (!formEl) return
	await formEl.formRef.validate((valid: any) => {
		if (!valid) return
		console.log(formEl.formModel)
		const { name, description } = formEl.formModel
		const role = { rolename: name, description }
		console.log(role)

		addRole(role)
		emit('close')
	})
}

const addRole = (role: any) => {
	RequestRoleAdd(role).then(data => {
		if (data.resultCode === 1) {
			ElMessage.success('添加成功!')
		}
	})
}
</script>

<style lang="scss" scoped></style>
